<!--
 * @Description: 评论
 * @Author: zheng yiliang
 * @Date: 2021-05-15 19:59:55
 * @LastEditTime: 2021-06-12 15:37:08
 * @LastEditors: zheng yiliang
-->
<template>
  <div class="comments">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>发表评论</legend>
      <el-form class="layui-form blog-editor" action="">
        <el-form-item>
          <el-input
            type="textarea"
            name="editorContent"
            placeholder="请输入内容"
            v-model="comment"
            :rows="5"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="disable"
            @click="sendComment"
            type="primary"
            class="layui-btn"
            >提交评论</el-button
          >
        </el-form-item>
      </el-form>
    </fieldset>
    <ul class="blog-comment" id="blog-comment">
      <template v-if="comments.length">
        <li v-for="(item, i) in comments" :key="i">
          <div class="comment-parent">
            <el-avatar
              style="position: absolute"
              class="header-img"
              :size="40"
              :src="item.headImg"
            ></el-avatar>

            <div class="info">
              <span class="username">{{ item.name }}</span>
              <span class="blogger" v-if="item.type === 0">博主</span>
            </div>
            <div class="comment-content">
              <p>{{ item.comment }}</p>
            </div>
            <p class="info info-footer">
              <span class="comment-time">{{ item.time | dateFormate }}</span>
              <el-button
                type="text"
                v-if="_inputShow(i)"
                class="btn-reply"
                @click="hideReplyInput(i, item.name, item.id)"
                >收起</el-button
              ><el-button
                type="text"
                v-else
                class="btn-reply"
                @click="showReplyInput(i, item.name, item.id)"
                >回复</el-button
              >
            </p>
          </div>
          <div v-show="item.reply.length" class="line-hr"></div>
          <div class="comment-child" v-for="(reply, j) in item.reply" :key="j">
            <el-avatar
              style="position: absolute"
              class="header-img"
              :size="40"
              :src="reply.fromAvatar"
            ></el-avatar>
            <div class="info">
              <span class="username">{{ reply.from }}</span>
              <span class="blogger" v-if="reply.fromType === 0">博主</span>
              <span style="padding-right: 5px">回复</span>
              <span
                class="username"
                :style="{
                  color: reply.to === nickname ? '#f56c6c' : '#01aaed',
                  fontSize: reply.to === nickname ? '16px' : '12px'
                }"
                >{{ reply.to === nickname ? '你' : reply.to }}</span
              >
              <!-- <span class="username">{{ reply.to }}</span> -->
              <span>{{ reply.comment }}</span>
            </div>
            <p class="info">
              <span class="comment-time">{{
                reply.create_time | dateFormate
              }}</span>
              <el-button
                type="text"
                v-if="_inputChildShow(i, j)"
                class="btn-reply"
                @click="hideReplyInput(i, reply.from, reply.fromId, j)"
                >收起</el-button
              ><el-button
                type="text"
                v-else
                class="btn-reply"
                @click="showReplyInput(i, reply.from, reply.fromId, j)"
                >回复</el-button
              >
            </p>
            <div class="replycontainer" v-show="_inputChildShow(i, j)">
              <el-form>
                <el-form-item>
                  <el-input
                    v-model="replyComment"
                    :rows="3"
                    type="textarea"
                    :placeholder="`回复${reply.from}：${reply.comment}`"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    :loading="replyDisable"
                    @click="sendCommentReply(reply, item)"
                    type="primary"
                    class="layui-btn layui-btn-xs"
                  >
                    提交
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="replycontainer" v-show="_inputShow(i)">
            <el-form>
              <el-form-item>
                <el-input
                  :rows="3"
                  v-model="replyComment"
                  type="textarea"
                  :placeholder="`回复${item.name}：${item.comment}`"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  :loading="replyDisable"
                  @click="sendCommentReply(item)"
                  type="primary"
                  class="layui-btn layui-btn-xs"
                >
                  提交
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </li>
      </template>
      <template v-else> 暂无评论... </template>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { addComments, commentsByArticle, replyComments } from '@/api'
export default {
  name: 'ArticleComment',
  data() {
    return {
      replyDisable: false,
      disable: false,
      comment: '',
      replyComment: '',
      comments: []
    }
  },
  props: ['articleId'],
  computed: {
    ...mapGetters(['nickname', 'avatar'])
  },
  methods: {
    showReplyInput(i, name, id, j) {
      this.replyComment = ''
      this.comments.forEach((item) => {
        item.inputShow = false
        item.reply.forEach((item) => {
          item.inputShow = false
        })
      })
      if (j === undefined) {
        this.comments[i].inputShow = !this.comments[i].inputShow
      } else {
        this.comments[i].inputShow = false
        this.comments[i].reply[j].inputShow =
          !this.comments[i].reply[j].inputShow
      }
    },
    hideReplyInput(i, name, id, j) {
      this.replyComment = ''
      this.comments.forEach((item) => {
        item.inputShow = false
        item.reply.forEach((item) => {
          item.inputShow = false
        })
      })
    },
    _inputShow(i) {
      return this.comments[i].inputShow
    },
    _inputChildShow(i, j) {
      return this.comments[i].reply[j].inputShow
    },
    // 一级评论
    async sendComment() {
      this.disable = true
      if (!this.nickname) {
        this.$message({
          showClose: true,
          type: 'warning',
          offset: '80',
          message: '请先登录'
        })
        this.disable = false
        return
      }
      if (!this.comment) {
        this.$message({
          showClose: true,
          type: 'warning',
          offset: '80',
          message: '评论不能为空'
        })
        this.disable = false
        return
      }
      const params = {
        article_id: this.$route.query.id,
        comment: this.comment
      }
      const { _RejCode, data, _RejMsg } = await addComments(params)
      this.disable = false
      if (_RejCode !== '00000000') {
        this.$message({
          showClose: true,
          type: 'error',
          offset: '80',
          message: _RejMsg
        })
        return
      }
      this.comment = ''
      console.log('评论数据', data)
      this.allComments()
    },
    async sendCommentReply(comment, item) {
      this.replyDisable = true
      if (!this.nickname) {
        this.$message({
          showClose: true,
          type: 'warning',
          offset: '80',
          message: '请先登录'
        })
        this.replyDisable = false
        return
      }
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: 'warning',
          offset: '80',
          message: '评论不能为空'
        })
        this.replyDisable = false
        return
      }
      const reply = {
        from: this.nickname,
        fromAvatar: this.avatar,
        to: comment.name || comment.from,
        toId: comment.id || comment.fromId,
        toAvatar: comment.headImg || comment.fromAvatar,
        comment: this.replyComment,
        _id: item ? item._id : comment._id
      }
      const { _RejCode, data, _RejMsg } = await replyComments(reply)
      this.replyDisable = false
      if (_RejCode !== '00000000') {
        this.$message({
          showClose: true,
          type: 'error',
          offset: '80',
          message: _RejMsg
        })
        return
      }
      this.replyComment = ''
      this.allComments()
      console.log(data)
    },
    dateStr(date) {
      // 获取js 时间戳
      let time = new Date().getTime()
      // 去掉 js 时间戳后三位，与php 时间戳保持一致
      time = parseInt((time - date) / 1000)
      // 存储转换值
      let s
      if (time < 60 * 10) {
        // 十分钟内
        return '刚刚'
      } else if (time < 60 * 60 && time >= 60 * 10) {
        // 超过十分钟少于1小时
        s = Math.floor(time / 60)
        return s + '分钟前'
      } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
        // 超过1小时少于24小时
        s = Math.floor(time / 60 / 60)
        return s + '小时前'
      } else if (time < 60 * 60 * 24 * 30 && time >= 60 * 60 * 24) {
        // 超过1天少于30天内
        s = Math.floor(time / 60 / 60 / 24)
        return s + '天前'
      } else {
        // 超过30天ddd
        date = new Date(parseInt(date))
        return (
          date.getFullYear() +
          '/' +
          (date.getMonth() + 1) +
          '/' +
          date.getDate()
        )
      }
    },
    async allComments() {
      const { _RejCode, data } = await commentsByArticle(this.$route.query.id)
      if (_RejCode !== '00000000') return
      console.log(data)
      this.comments = data
    }
  },
  filters: {
    dateFormate(date) {
      // 获取js 时间戳
      date = new Date(date).getTime()
      let time = new Date().getTime()
      // 去掉 js 时间戳后三位，与php 时间戳保持一致
      time = parseInt((time - date) / 1000)
      // 存储转换值
      let s
      if (time < 60 * 10) {
        // 十分钟内
        return '刚刚'
      } else if (time < 60 * 60 && time >= 60 * 10) {
        // 超过十分钟少于1小时
        s = Math.floor(time / 60)
        return s + '分钟前'
      } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
        // 超过1小时少于24小时
        s = Math.floor(time / 60 / 60)
        return s + '小时前'
      } else if (time < 60 * 60 * 24 * 30 && time >= 60 * 60 * 24) {
        // 超过1天少于30天内
        s = Math.floor(time / 60 / 60 / 24)
        return s + '天前'
      } else {
        // 超过30天ddd
        date = new Date(parseInt(date))
        return (
          date.getFullYear() +
          '/' +
          (date.getMonth() + 1) +
          '/' +
          date.getDate()
        )
      }
    }
  },
  mounted() {
    this.allComments()
  }
}
</script>
<style lang="scss" scoped>
</style>
